<template>
  <div class="container">
    <div class="bg-container">
      <div class="classification">
        <div class="floatParent">
          <div :class="itemActive === item.platformSign ? 'media-item media-item-active' : 'media-item'" v-for="item in itemData" :key="item.platformSign" @click="changeMedia(item.platformSign)">
            <img v-if="itemActive === item.platformSign" class="media-icon" :src="item.activeIcon" />
            <img v-else class="media-icon" :src="item.icon" />
            <div class="media-data">
              <div class="data-title">账号数量</div>
              <div class="data-item">{{item.accountNum | dataFormat}}</div>
            </div>
            <div class="media-data" v-if="item.platformSign === 'wx'">
              <div class="data-title">总阅读量</div>
              <div class="data-item">{{item.readCount | dataFormat}}</div>
            </div>
            <div class="media-data" v-else>
              <div class="data-title">粉丝总量</div>
              <div class="data-item">{{item.readCount | dataFormat}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="data-detail">
        <div class="data-display">
          <DataDisplay :dataType="itemActive" :accountTotalData="accountTotalData" color="#fff" />
        </div>
        <div class="detail-title">账号列表</div>
        <div v-if="accountDetailData.length === 0">
          <a-empty />
        </div>
        <div class="data-display" v-else>
          <a-layout class="account-container">
            <a-layout-sider class="account-list" width="180">
              <div
                :class="accountIdActive === item.accountId ? 'list-item list-item-active' : 'list-item'"
                :title="item.accountName"
                v-for="(item, index) in accountDetailData"
                :key="item.accountId"
                @click="changeAccount(index)"
              >
                {{item.accountName}}
              </div>
            </a-layout-sider>
            <a-layout-content class="account-data">
              <div class="account-detail">
                <DataDisplay :dataType="itemActive" :accountTotalData="accountDataActive" color="#fff" />
              </div>
              <div style="backdrop-filter: blur(4px);">
                <AccountTable :dataType="itemActive" :accountDataTable="accountDataActive" color="#fff" />
              </div>
              
            </a-layout-content>
          </a-layout>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DataDisplay from "@/views/selfMedia/modules/DataDisplay";
import AccountTable from '@/views/selfMedia/modules/AccountTable';
import { getAction } from '@/api/manage';

export default {
  name: "DashboardMedia",
  components: {DataDisplay, AccountTable},
    data() {
      return {
        url: {
          accountTotal: '/platformData/accountTotal',
          platformTotal: '/platformData/platformTotal',
          detailData: '/platformData/detailData',
        },
        items: [
          {platformSign: 'dy', icon: require('@/assets/self_media/dy.png'), activeIcon: require('@/assets/self_media/dy_active.png')},
          {platformSign: 'wx', icon: require('@/assets/self_media/wx.png'), activeIcon: require('@/assets/self_media/wx_active.png')},
          {platformSign: 'ks', icon: require('@/assets/self_media/ks.png'), activeIcon: require('@/assets/self_media/ks_active.png')},
          {platformSign: 'wb', icon: require('@/assets/self_media/wb.png'), activeIcon: require('@/assets/self_media/wb_active.png')},
          {platformSign: 'bili', icon: require('@/assets/self_media/bili.png'), activeIcon: require('@/assets/self_media/bili_active.png')},
          {platformSign: 'xhs', icon: require('@/assets/self_media/xhs.png'), activeIcon: require('@/assets/self_media/xhs_active.png')},
        ],
        itemActive: 'dy',
        itemData: [],
        accountTotalData: {},
        accountDetailData: [],
        accountIdActive: '',
        accountDataActive: {},
      }
    },
    created() {
      this.getAccountTotal();
      this.getAccountTotalData();
      this.getAccountDetailData();
    },
    methods: {
      getAccountTotal() {
        getAction(this.url.accountTotal).then(res=>{
          if(res.success && res.result){
            this.items.forEach((item, index) => { 
              let b = res.result.findIndex(o => o.platformSign === item.platformSign);
              const obj = {...item, ...res.result[b]}
              this.itemData.push(obj);
            });
          }
        })
      },
      changeMedia(key) {
        if (this.itemActive !== key) {
          this.itemActive = key;
          this.$nextTick(() => {
            this.getAccountTotalData();
            this.getAccountDetailData();
          });
        }
      },
      getAccountTotalData() {
        this.accountTotalData = {};
        getAction(this.url.platformTotal, {platformType: this.itemActive}).then(res=>{
          if(res.success && res.result){
            this.accountTotalData = res.result
          }
        })
      },
      getAccountDetailData() {
      
        getAction(this.url.detailData, {platformType: this.itemActive}).then(res=>{
          if(res.success && res.result){
            this.accountDetailData = [];
            res.result.forEach((item, index) => {
              const itemInfo = {
                accountName: item.name,
                accountId: item.id,
                accountData: item,
              }
              this.accountDetailData.push(itemInfo);
            });
            console.log(this.accountDetailData);
            this.accountIdActive = this.accountDetailData[0].accountId;
            this.accountDataActive = this.accountDetailData[0].accountData;
          } else {
            this.accountDetailData = [];
            this.accountIdActive = '';
            this.accountDataActive = {};
          }
        })
      },
      changeAccount(index) {
        this.accountIdActive = this.accountDetailData[index].accountId;
        this.accountDataActive = this.accountDetailData[index].accountData;
      },
    }
  }
</script>

<style scoped lang="less">
  .container {
    width: 100%;
    min-height: 100vh;
    padding: 20px;
    background-color: #0a2f1e; /* 深绿色背景 */
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(52, 211, 153, 0.1) 0%, transparent 20%),
        radial-gradient(circle at 90% 80%, rgba(64, 255, 157, 0.1) 0%, transparent 20%);
    background-attachment: fixed;
    .bg-container {
      width: 100%;
      height: 100vh;
      background-size: 40px 40px;
      background-image: 
          linear-gradient(to right, rgba(64, 255, 157, 0.05) 1px, transparent 1px),
          linear-gradient(to bottom, rgba(64, 255, 157, 0.05) 1px, transparent 1px);
    }
    .classification {
      overflow-x: auto;
      .floatParent {
        display: inline-block;
        width: 2105px;
        .media-item {
          width: 340px;
          float: left;
          margin-right: 13px;
          backdrop-filter: blur(4px);
          padding: 22px 16px;
          overflow: hidden;
          border-radius: 4px 4px 0 0;
          cursor: pointer;
          border: 1px solid rgba(255, 255, 255, 0.1);
          color: #fff;
          .media-icon {
            width: 44px;
            height: 44px;
            float: left;
            margin-right: 4px;
          }
          .media-data {
            float: left;
            margin-left: 12px;
            .data-title {
              font-size: 14px;
            }
            .data-item {
              font-weight: bold;
              font-size: 24px;
            }
          }
        }
        .media-item:last-child {
          margin-right: 0;
        }
        .media-item-active {
          background: rgba(26, 94, 56, 0.4);
          .data-title {
            color: #fff !important;
          }
          .data-item {
            color: #fff !important;
          }
        }
      }
    }
    .data-detail {
      // padding: 12px;
      backdrop-filter: blur(4px);
      border-radius: 0 0 4px 4px;
      .data-display {
        border: 1px solid rgba(255, 255, 255, 0.1);
      }
      .detail-title {
        font-weight: 600;
        font-size: 16px;
        color: #fff;
        margin: 20px 0;
      }
    }
    .account-container {
      background: transparent;
      .account-list {
        background: transparent;
        .list-item {
          line-height: 48px;
          font-size: 14px;
          color: #fff;
          padding: 0 12px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          cursor: pointer;
        }
        .list-item-active {
          background: rgba(26, 94, 56, 0.4) !important;
        }
      }
      .account-data {
        background: transparent;
        padding: 16px;
        .account-detail {
          backdrop-filter: blur(4px);
          border-radius: 4px;
          margin-bottom: 16px;
        }
      }
    }
  }
  

</style>